<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta content="no-cache" http-equiv="Cache-Control" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />
  <title></title>
  <link rel="stylesheet" href="../css/weui.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="weui-mask loading-bg"></div>

<div class="main" id="app">
  <div class="weui-flex search-bar" v-show="pageType == 'specifyCity'">
    <div>城市：</div>
    <!--<select class="weui-select" name="select2">
      &lt;!&ndash;<option value="-1">不限</option>&ndash;&gt;
      <option>中国</option>
    </select>-->
    <select class="weui-select" name="select2" v-model="Province">
      <option value="-1" hidden disabled>洲/省份</option>
      <option v-for="(province, pIndex) in provinceList" :value="pIndex + 1">{{province}}</option>
    </select>
    <select class="weui-select" name="select2" v-model="City">
      <option value="-1" hidden disabled>国家/城市</option>
      <option value="-1">不限</option>
      <option v-for="(city, cIndex) in cities" :value="cIndex">{{city}}</option>
    </select>
    <button class="filter-btn" @click="search('new')">匹配</button>
  </div>

  <div class="search-bar weui-flex" v-show="pageType == 'specifyID'">
    <div>对方ID：</div>
    <div class="input-block weui-flex">
      <input type="number" placeholder="长按可粘贴" class="weui-search-bar__input weui-flex__item" v-model="UserNo">
    </div>
    <button class="filter-btn" @click="search('new')">匹配</button>
  </div>
  <!--<div class="weui-search-bar" id="searchBar" v-show="pageType == 'country' || pageType == 'city' ">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="在结果里搜索 ID/昵称" v-model="searchKey" @input="search('new')">
        <a href="javascript:" class="weui-icon-clear" id="searchClear" @click="searchKey = '';search('new')"></a>
      </div>
      &lt;!&ndash;<label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>在结果里搜索 ID/昵称/备注</span>
      </label>&ndash;&gt;
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>-->
  <div class="search-bar weui-flex" v-show="pageType == 'country' || pageType == 'city' ">
    <div class="input-block weui-flex">
      <img src="../img/icon-search.png">
      <input class="weui-flex__item" type="text" placeholder="在结果里搜索ID/昵称" v-model="searchKey" @input="search('new')">
      <img src="../img/icon-remove.png" @click="searchKey = '';search('new')" v-if="searchKey.length > 0">
    </div>
  </div>
  <div class="marry-body">
    <div class="marry-title weui-flex hairline-bottom">
      <div class="weui-flex__item">可加好友 <span>{{addNum || 0}}</span> 次 <button class="more-button" @click.stop.prevent="moreAddNum">更多</button></div>
      <div class="right-title weui-flex">
        <div class="weui-flex__item">诚信分</div>
        <div class="weui-flex__item">ta配我</div>
        <div class="weui-flex__item">我配ta</div>
      </div>
    </div>
    <div class="user-list" @scroll="listScroll($event)">
      <div class="user-item weui-flex hairline-bottom" v-for="item in userList">
        <img src="../img/default-header.png" :data-src="item.HeadImgUrl" @click="previewImg(item.HeadImgUrl)">
        <div class="right-block weui-flex weui-flex__item" @click="jumpToMB(item.openid)">
          <div class="username">{{item.NickName}}</div>
          <div class="right-value weui-flex">
            <div class="weui-flex__item">{{item.Sincerity == 0 ? '' : item.Sincerity + '分'}}</div>
            <div class="weui-flex__item">{{formatNum((item.ToMe || 0) * 100)}}%</div>
            <div class="weui-flex__item">{{formatNum((item.ToTa || 0) * 100)}}%</div>
          </div>
          <div class="user-attr weui-flex">
            <div class="item" v-if="item.age">{{item.age}}岁</div>
            <div class="item" v-if="item.constellation">{{item.constellation}}座</div>
            <div class="item" v-if="item.cityAttr">{{item.cityAttr}}</div>
          </div>
          <div class="info-num">{{item.Introduction}}</div>
          <div class="right-btns">
            <button class="ac-button add-again" @click.stop.prevent="addFriend(item)" :class="{ 'black-color': item.FriendId != null }">{{!item.FriendId ? (!item.AddId ? '加ta' : '再加') : '已是好友'}}</button>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isLoading">加载中...</div>
      <div class="loading" v-if="noData">已无更多</div>
    </div>
  </div>
</div>

<script type="text/javascript" src="../js/tools/weui.js"></script>
<script type="text/javascript" src="../js/tools/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/tools/vue.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/serviceInterface/serviceInterface.js"></script>
<script type="text/javascript" src="../js/tools/search.js"></script>
<script type="text/javascript" src="../js/pages/marry.js"></script>
</body>
</html>